<template>
  <div class="app-container">
    <el-card class="content">
      <div slot="header">订单信息</div>
      <el-col :span="8">
        <el-form label-width="120px">
          <el-form-item label="订单号">{{ form['orderSn'] }}</el-form-item>
          <el-form-item label="用户名">{{ form['contactName'] }}</el-form-item>
          <el-form-item label="支付用户">{{ form['userName'] }}</el-form-item>
          <el-form-item label="联系方式">{{ form['mobile'] }}</el-form-item>
          <el-form-item v-if="form['type']!=5" label="乘坐人数">{{ form['rideNumber'] }}人</el-form-item>
          <el-form-item v-if="form['type']!=5" label="车辆类型">{{ form['carTypeText'] }}</el-form-item>
          <el-form-item v-if="form['type']!=5" label="备注信息">{{ form['memo'] }}</el-form-item>
          <el-form-item v-if="form['status']===10">
            <el-button type="danger" @click="showRefundDialog">退款</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form label-width="120px">
          <el-form-item label="下单时间">{{ form['createTime'] }}</el-form-item>
          <el-form-item :label="form['type']===5?'租车时间':'出发时间'">{{ form['reserveTime'] }}</el-form-item>
          <el-form-item :label="form['type']===5?'取车点':'上车点'">{{ form['addressFrom'] }}</el-form-item>
          <el-form-item :label="form['type']===5?'还车点':'目的地'">{{ form['addressTo'] }}</el-form-item>
          <el-form-item v-if="form['type']===1" label="航班号">{{ form['flightNumber'] }}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form label-width="120px">
          <el-form-item label="订单状态">
            <el-tag v-if="form['status']===2||form['status']===3" type="info">{{ form['statusText'] }}</el-tag>
            <el-tag v-else-if="form['status']===1" type="warning">{{ form['statusText'] }}</el-tag>
            <el-tag v-else-if="form['status']===6" type="danger">{{ form['statusText'] }}</el-tag>
            <el-tag v-else-if="form['status']===4||form['status']===8">{{ form['statusText'] }}</el-tag>
            <el-tag v-else type="success">{{ form['statusText'] }}</el-tag>
          </el-form-item>
          <el-form-item label="订单类型">{{ form['typeName'] }}</el-form-item>
          <!--<el-form-item label="订单金额">{{ form['totalMoney'] }}</el-form-item>-->
          <el-form-item v-if="form['type']!=5" label="实付金额">￥{{ form['payMoney'] }}</el-form-item>
          <el-form-item label="支付单号">{{ form['paymentNo'] }}</el-form-item>
          <el-form-item label="支付时间">{{ form['payTime'] }}</el-form-item>
          <el-form-item v-if="form['status']===6" label="司机拒接原因">{{ form['refuse'] }}</el-form-item>
        </el-form>
      </el-col>
    </el-card>
    <el-card v-if="form['type']===5" class="content">
      <div slot="header">费用明细</div>
      <el-col :span="12">
        <el-form label-width="200px">
          <el-form-item v-for="(item,index) in form['outletsServer']" :key="index" :label="item.name">￥{{ item.price }}</el-form-item>
          <el-form-item label="实付金额">￥{{ form['payMoney'] }}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form label-width="120px">
          <el-form-item label="车型">{{ form['outletsData'].carName }}{{ form['outletsData'].modelNumber }}</el-form-item>
          <el-form-item label="车牌号">{{ form['outletsData'].plateNumber }}</el-form-item>
          <el-form-item label="车辆参数">{{ form['outletsData'].carType }} | {{ form['outletsData'].appearance }}</el-form-item>
        </el-form>
      </el-col>
    </el-card>
    <el-card v-if="form['type']!==2&&form['type']!==5" class="content">
      <div slot="header">派单信息</div>
      <el-form label-width="120px">
        <el-form-item label="车辆选择">
          <el-select :disabled="form['status']!==4" v-model="distributeForm['carId']" placeholder="请选择指派的车辆" style="width:300px;">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.name+'  '+item.plateNumber"
              :value="item.id">
              <!--<img :src="item['url']" style="float: left">-->
              <span style="color: #666; font-size: 13px">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.plateNumber }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="司机选择">
          <el-select :disabled="form['status']!==4" v-model="distributeForm['driverId']" placeholder="请选择司机">
            <el-option v-for="item in driverList" :label="item.nickname+ '  ' +item.mobile" :value="item.id" :key="item.id">
              <span style="color: #666; font-size: 13px">{{ item.nickname }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
            </el-option>
          </el-select>
          <!--<el-button :disabled="form['status']!==4" type="danger" size="medium">添加</el-button>-->
        </el-form-item>
        <!--<el-form-item label="车牌号码">
          <el-input :disabled="form['status']!==4" v-model="form['carNum']"/>
        </el-form-item>-->
        <el-form-item label="通知方式">
          <el-checkbox-group :disabled="form['status']!==4" v-model="distributeForm['noticeList']">
            <el-checkbox label="1">短信</el-checkbox>
            <el-checkbox label="2">微信</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button v-if="form['status']===4" type="primary" @click="allocateOrders">立即分配</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog :visible.sync="refundDialogVisable" title="确认退款" width="500px" class="dialog" center>
      <el-form label-width="150px">
        <el-form-item label="退款金额">
          <el-input v-model="refundCount" autofocus/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisable = false">取 消</el-button>
        <el-button type="primary" @click="confirmRefund">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'OrderDetails',
    data() {
      return {
        form: {
          id: '',
          // 订单类型
          type: 2,
          // 订单状态
          status: 1,
          // 联系人名称
          contactName: '',
          // 手机号
          mobile: '',
          // 出发时间
          reserveTime: ''
        },
        // 车辆列表
        carList: [],
        // 司机列表
        driverList: [],
        // 派单信息
        distributeForm: {
          // 訂單id
          id: '',
          // 車輛id
          carId: '',
          // 通知方式
          noticeList: [],
          // 司机id
          driverId: null
        },

        // 退款弹窗
        refundDialogVisable: false,
        refundCount: ''
      }
    },
    mounted(){
      this.form['id'] = this.$router.currentRoute.query['id'] || '';
      this.loadData();
      this.loadDriverList();
    },
    methods: {
      // 加载用户信息
      loadData(){
        (async () => {
          const result = await this.$service.applicationGetOrderDetails({id: this.form['id']});
          if (result.code === 0) {
            Object.assign(this.form, result.data || {});
            Object.assign(this.distributeForm, result.data['allotData'] || {});
            this.distributeForm['notify'] && (this.distributeForm['noticeList'] = this.distributeForm['notify'].split(','));
            this.loadCarList();
          }
        })();
      },
      // 加载车辆列表
      loadCarList(){
        (async () => {
          const result = await this.$service.applicationGetCarListByCarType({type: this.form['carType']});
          if (result.code === 0) {
            this.carList = result.data;
          }
        })();
      },
      // 加载司机列表
      loadDriverList(){
        (async () => {
          const result = await this.$service.applicationGetAllDriver();
          if (result.code === 0) {
            this.driverList = result.data;
          }
        })();
      },
      // 派单
      allocateOrders() {
        const params = Object.assign({}, this.distributeForm);
        params['id'] = this.form['id'];
        params['notify'] = params['noticeList'].join(',');
        (async () => {
          const result = await this.$service.applicationAllocateOrders(params);
          if (result.code === 0) {
            this.$message.success('派单成功~')
            this.loadData();
          }
        })();
      },

      showRefundDialog(){
        this.refundDialogVisable = true;
      },
      confirmRefund(){
        if (this.refundCount === '' || this.refundCount === null) {
          this.$message.error('请输入退款金额~');
          return;
        }
        const params = {
          orderSn: this.form['orderSn'],
          status: 2,
          money: this.refundCount,
          reason: ''
        };
        (async () => {
          const result = await this.$service.applicationRefundOrders(params);
          if (result.code === 0) {
            this.$message.success('退款成功~');
            this.refundDialogVisable = false;
            this.loadData();
          } else {
            this.$message.error(result.msg);
          }
        })();
      }
    }
  }
</script>

<style scoped>
  .content{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto 20px auto;
  }
</style>
